<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>停止事件传播</title>
        <style type="text/css">
            div { border: 1px solid blue ; margin: 50px ; min-height: 100px ; }
        </style>
    </head>
    <body>

        <h3>在捕获阶段停止传播</h3>

        <div class="wrapper">
            <div class="middle">
                <div class="inner">
                    如果在事件捕获阶段阻止了事件的传播行为，则会导致不再发生事件冒泡
                </div>
            </div>
        </div>
        

        <script type="text/javascript">
            const type = 'click' ;
            const capture = true ;
            const wrapper = document.querySelector( '.wrapper' );
            const wrapperListener = function(e){
                console.log( e.eventPhase , e.type , e.target , this );
            }
            wrapper.addEventListener( type , wrapperListener , capture );

            const middle = document.querySelector( '.middle' );
            const middleListener = function(e){
                console.log( e.eventPhase , e.type , e.target  , this );
                e.stopPropagation(); // 阻止事件传播
            }
            middle.addEventListener( type , middleListener , capture );

            const inner = document.querySelector( '.inner' );
            const innerListener = function(e){
                console.log( e.eventPhase , e.type , e.target , this  );
            }
            inner.addEventListener( type , innerListener , capture );
        </script>
    </body>
</html>